/**
* @Descripttion: 未描述
* @Author: Chenbangquan
* @version: 1.0.0
* @CreateDate 2023-04-10 15:08
* @LastEditors: cbq
* @LastEditTime: 2023-04-10
*/
<template>
  <div>
    <el-form ref="ruleFormRef" :model="tableForm" inline class="ruleForm">
      <el-form-item label="所属角色" prop="roleId">
        <el-select v-model="tableForm.queryRo.roleId" filterable clearable placeholder="请选择所属角色">
          <el-option v-for="(item,index) in roleList" :label="item.name" :value="item.id" :key="index" />
        </el-select>
      </el-form-item>
      <el-form-item label="员工名称：">
        <el-input
                v-model="tableForm.queryRo.name"
                placeholder="请输入员工名称"
                style="width: 180px"
                clearable
        />
      </el-form-item>
      <el-form-item label="员工电话：">
        <el-input
                v-model="tableForm.queryRo.phone"
                placeholder="请输入员工电话"
                style="width: 180px"
                clearable
        />
      </el-form-item>
      <el-form-item label="状态：" prop="name">
        <el-select v-model="tableForm.queryRo.status" clearable style="width: 136px">
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="-1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableList">查询</el-button>
        <el-button type="success" @click="addUser()">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableList" style="width: 100%" v-loading="loading">
      <el-table-column label="序号"  type="index" width="55" align="center"/>
      <el-table-column prop="name" label="员工名称" align="center" />
      <el-table-column prop="roleName" label="所属角色" align="center" />
      <el-table-column prop="account" label="登录账号" align="center" />
      <el-table-column prop="id" label="ID" align="center" width="80" />
      <el-table-column prop="roleId" label="所属角色" align="center" />
      <el-table-column prop="phone" label="员工电话" align="center" width="120" />
      <el-table-column prop="idcard" label="员工身份证" align="center" />
      <el-table-column prop="sex" label="性别" align="center" width="60" />
      <el-table-column prop="inTime" label="入职时间" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" width="165" />
      <el-table-column prop="createTime" label="是否启用" align="center" width="90">
        <template #default="scope">
          <span>{{scope.row.status == 1 ? '启用':'禁用'}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="160">
        <template #default="scope">
          <!--<el-button link type="primary" size="small">Detail</el-button>-->
          <el-button link type="primary" size="small" @click="editRole(scope.row)">编辑</el-button>
          <el-button link type="danger" size="small" @click="delRole(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <footer class="pagination">
      <el-pagination
              v-model:currentPage="tableForm.current"
              v-model:page-size="tableForm.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              small
      />
    </footer>
    <el-drawer
            v-model="drawer"
            :title="ruleForm.data.id ? '编辑员工': '新增员工'"
            :direction="direction">
      <el-form
              ref="ruleFormRef"
              :model="ruleForm.data"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
      >
        <el-form-item label="登录账号" prop="account">
          <el-input v-model="ruleForm.data.account" placeholder="请填写员工登录账号" />
        </el-form-item>
        <!--<el-form-item label="登录密码" prop="password">-->
          <!--<el-input v-model="ruleForm.data.password" placeholder="请填写员工登录密码" />-->
        <!--</el-form-item>-->
        <el-form-item label="员工名称" prop="name">
          <el-input v-model="ruleForm.data.name" placeholder="请填写员工名称" />
        </el-form-item>
        <el-form-item label="员工昵称" prop="nickname">
          <el-input v-model="ruleForm.data.nickname" placeholder="请填写员工昵称" />
        </el-form-item>
        <el-form-item label="员工电话" prop="phone">
          <el-input maxlength="11" v-model="ruleForm.data.phone" placeholder="请填写员工电话号码"/>
        </el-form-item>
        <el-form-item label="身份证" prop="idcard">
          <el-input v-model="ruleForm.data.idcard" placeholder="请填写员工身份证" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属角色" prop="roleId">
          <el-select v-model="ruleForm.data.roleId" filterable clearable placeholder="请选择所属角色">
            <el-option v-for="(item,index) in roleList" :label="item.name" :value="item.id" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" prop="inTime">
          <el-date-picker
                  v-model="ruleForm.data.inTime"
                  type="date"
                  placeholder="请选择入职时间"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="status"></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="flex: auto">
          <!--<el-button @click="cancelForm">取消</el-button>-->
          <el-button type="primary"  @click="submitForm(ruleFormRef)">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted,nextTick} from 'vue'
    import { FormInstance, FormRules,ElMessageBox } from 'element-plus'
    import { ElMessage } from 'element-plus'

    import {getRoleList,postAddUser,postUserList,postEditUserById,delUserById} from '@/api/authApi/authApi'
    const drawer = ref(false)
    const direction = ref('rtl')
    const formSize = ref('default')
    const status = ref(true)
    const sex = ref('男')
    const ruleFormRef = ref<FormInstance>()

    const ruleForm = reactive({
        data:{
          account: '', //登录账号
          // password: '', //登录账号
          depId: 0,//部门Id
          id: 0,
          idcard: "",//身份证
          inTime: "",//入职时间
          name: "",
          nickname: "",
          phone: "",//电话
          roleId: "", //角色id
          sex: sex.value,//性别
          status: 0,//启用状态(1启用，-1停用)
        }
    })

    const rules = reactive<FormRules>({
        name: [
            // { required: true, message: 'Please input Activity name', trigger: 'blur' },
            { required: true, message: '请填写员工名称', trigger: 'blur' },
            // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        account: [
            { required: true, message: '请填写员工登录账号', trigger: 'blur' },
        ],
        // password: [
        //     { required: true, message: '请填写员工登录密码', trigger: 'blur' },
        // ],
        nickname: [
            { required: true, message: '请填写员工名称', trigger: 'blur' },
        ],
        phone: [
            { required: true, message: '请填写员工电话', trigger: 'blur' },
            { min: 11, max: 11, message: '请填写正确的电话号码', trigger: 'blur' },
        ],
        idcard: [
            { required: true, message: '请填写员工身份证号码', trigger: 'blur' },
            // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        roleId: [
            { required: true, message: '请选择员工角色', trigger: 'blur' }
        ],
        sex: [
            { required: true, message: '请选择员工性别', trigger: 'blur' }
        ],
        inTime: [
            { required: true, message: '请选择入职时间', trigger: 'blur' }
        ],
    })
    onMounted(() => {
        getTableList()
        getRoleAllList()
    })
    //编辑
    const editRole = (row)=>{
        ruleForm.data= {...row}
        status.value = ruleForm.data.status == 1 ? true : false
        // ruleForm.data.status = 1
        drawer.value = true
        console.log('ruleForm',ruleForm.data)
    }

    const tableForm = reactive({
        asc: true,
        queryRo: {
            name:'',
            depId:'',//部门id
            roleId:'',//角色id
            status:'',//启用状态(1启用，-1停用)
            statusLogin:'',//登录状态（1在线，-1离线）
        },
        searchCount: true,
        current: 1,
        pageSize: 20,
    })
    //总数
    const total = ref(0)
    //表格数据
    const tableList = ref([])
    //角色列表
    const roleList = ref([])
    //加载
    const loading = ref(false)
    //获取所有角色列表
    const getRoleAllList = async () =>{
        let res = await getRoleList()
        roleList.value = res.data.data
        console.log(res)
    }
    //获取表格数据
    const getTableList = async () => {
        loading.value = true
        let res = await postUserList(tableForm)
        tableList.value = res.data.data.rows
        total.value = Number(res.data.data.total)
        loading.value = false
    }
    //改变每页条数
    const handleSizeChange = (val: number) => {
        tableForm.current = 1
        tableForm.pageSize = val
        getTableList()
    }
    //改变当前页数
    const handleCurrentChange = (val: number) => {
        tableForm.current = val
        getTableList()
    }
    const delRole = (row)=>{
        ElMessageBox.confirm(
            '您确定要删除该角色吗?',
            '注意',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                let res = await delUserById(row.id)
                console.log(res)
                if(res.data.code == 200){
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getTableList()
                }

            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消删除',
                })
            })
    }
    //新增
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate(async (valid, fields) => {
            if (valid) {
                let res, message
                ruleForm.data.status = status.value ? 1 : -1
                ruleForm.data.sex = sex.value
                console.log('data',ruleForm.data)
                if(ruleForm.data.id){
                    res = await postEditUserById(ruleForm.data)
                    message = '编辑成功！'
                }else {
                    res = await postAddUser(ruleForm.data)
                    message = '新增成功！'
                }
                if(res.data.code == 200){
                    ElMessage({
                        message: message,
                        type: 'success',
                    })
                    getTableList()
                    drawer.value = false
                }
                if(res.data.code == 1001){
                  ElMessage({
                    message: '操作失败，省份证号重复!',
                    type: 'error',
                  })
                  getTableList()
                  drawer.value = false
                }
              if(res.data.code == 1002){
                ElMessage({
                  message: '操作失败，系统账号重复!',
                  type: 'error',
                })
                getTableList()
                drawer.value = false
              }
              if(res.data.code == 1003){
                ElMessage({
                  message: '操作失败，电话号码重复!',
                  type: 'error',
                })
                getTableList()
                drawer.value = false
              }
            } else {
                console.log('error submit!', fields)
            }
        })
    }
    const addUser = async (formEl: FormInstance | undefined) => {
        drawer.value = true
        let  obj = {
            account:'',
            // password:'',
            depId: 0,//部门Id
            id: 0,
            idcard: "",//身份证
            inTime: "",//入职时间
            name: "",
            nickname: "",
            phone: "",//电话
            roleId: "", //角色id
            sex: sex.value,//性别
            status: 0,//启用状态(1启用，-1停用)
        }
        ruleForm.data = obj
    }
</script>

<style scoped>

</style>
